<template>
  <div class="card">
    <h2 class="title">
      <slot name="cardTitle"></slot>
      <!-- 带有 name 的属性的插槽，称为具名插槽 -->
    </h2>
    <div class="subtitle">
      <slot name="cardSubtitle"></slot>
    </div>
    <div class="content">
      <slot name="cardContent"></slot>
    </div>
    <div class="action">
      <!-- 定义一个插槽 -->
      <!-- 插槽的默认内容，只有没有提供内容时，才会显示 -->
      <slot>卡片功能区域</slot>
      <!-- 没有 name 属性的插槽称为默认插槽，会有一个隐含的名字：default -->
    </div>
  </div>
</template>

<style scoped>
.card {
  width: 250px;
  border: 1px solid black;
}

.card h2,
.card div {
  margin: 10px;
  padding: 5px;
}

.title {
  border: 1px solid red;
}

.subtitle {
  border: 1px solid green;
}

.content {
  border: 1px solid blue;
}

.action {
  border: 1px solid pink;
}
</style>
